<template>
  <div class="order-setting">
    <div class="title">
      <div class="block"></div>
      <div class="word">订单设置</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="setting-content-title">订单设置</div>
    <div class="order-setting-content">
      <el-form
        :inline="true"
        :model="form"
        :rules="rules"
        ref="ruleForm"
        class="form"
      >
        <el-form-item label="正常订单超过(分钟)" prop="time">
          <el-input v-model="form.time"></el-input>
        </el-form-item>
        <el-form-item> 未付款，订单自动关闭 </el-form-item>
      </el-form>
      <el-button class="submit" :plain="true" @click="onSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getOrderExpiration, setOrderExpiration } from "../../../api";

export default {
  inject: ['reload'],
  name: "orderSetting",
  components: {},

  data() {
    return {
      form: {
        time: "",
      },
      rules: {
        time: [
          { required: true, message: "请输入输入时间", trigger: "blur" },
          {
            min: 1,
            max: 4,
            message: "长度在 1 到 4 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.$emit('routeName', "orderSetting");

    getOrderExpiration().then((res) => {
      this.form.time = res.data;
    });
  },

  methods: {
    refresh() {
      this.reload()
    },
    onSubmit() {
      setOrderExpiration(this.form.time).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "设置时间成功",
            type: "success",
          });
        } else {
          this.$message.error("设置时间错误");
        }
      });
    },
  },
};
</script>

<style scoped>
.title {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  margin-left: 80%;
}

.setting-content-title {
  font-size: 14px;
  margin-top: 20px;
  padding-left: 20px;
  border: 1px solid #e4e4e4;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}

.order-setting-content {
  height: 500px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
}

.form {
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 100px;
}

.submit {
  margin-left: 38%;
  margin-top: 50px;
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
  width: 100px;
}
</style>
